<template>
	<view>
    <headBar :title="title"></headBar>
		<view class="query"></view>
		<view class="top70 menu u-m-l-30 u-m-r-30 u-p-b-15 u-p-t-15 u-flex u-row-around" v-if="modelType=='ranking'">
			<view class="tags" :class="modelId=='hot'?'tag-active':''" @click="x_redirect('/jjbz/list/list?type=ranking&id=hot')">热门榜</view>
			<view class="tags" :class="modelId=='zan'?'tag-active':''" @click="x_redirect('/jjbz/list/list?type=ranking&id=zan')">点赞榜</view>
			<view class="tags" :class="modelId=='coll'?'tag-active':''" @click="x_redirect('/jjbz/list/list?type=ranking&id=coll')">收藏榜</view>
		</view>
		<scroll-view scroll-x class="top70 menus" :scroll-into-view="rolldistance" :scroll-with-animation="true" v-if="modelType=='category'">
			<view class="u-p-b-15 u-p-t-15 u-flex u-row-left">
				<view class="" id="akun1" style="padding: 0 16rpx;"></view>
				<view class="tags" id="akun2" :class="-1==modelId?'tag-active':''" @click="x_redirect('/jjbz/list/list?type=category&id=-1')">最新</view>
				<view class="tags" id="akun3" :class="-2==modelId?'tag-active':''" @click="x_redirect('/jjbz/list/list?type=category&id=-2')">精选</view>
				<view class="tags" :id="'akun'+(index+4)" :class="item.id==modelId?'tag-active':''" @click="x_redirect('/jjbz/list/list?type=category&id='+item.id)" v-for="(item) in categoryList" >{{item.name}}</view>
				<view class="" style="width: 40rpx;">ㅤ</view>
			</view>
		</scroll-view>
		<view class="u-skeleton">
			<view class="">
				<view class="u-flex u-row-left u-flex-wrap u-p-l-40" style="padding-top:40px;">
					<block >
						<block v-for="(item) in imageList" >
							<view class="tab u-skeleton-fillet" @click="x_redirect('/jjbz/detail/detail?params='+JSON.stringify(item))">
                <view v-if="item.txt" style="position: absolute;top:5px;left:5px;background: #fbc02d;color:#FFFFFF;">{{item.txt}}</view>
								<image :src="item.thumbnail" style="width: 215rpx;height: 350rpx;" mode="aspectFill"></image>
							</view>
						</block>
					</block>
				</view>
			</view>
			<view v-if="noData"
			class="u-flex u-flex-col u-col-center"
			style="width: 100vw;height: 50vh;padding-top: 200rpx;background-color: #FFFFFF;">
				<view class="">
					<image style="width: 300rpx;height: 300rpx;" src="/static/nodata.png"></image>
				</view>
				<view class="u-tips-color u-font-12 u-p-t-30">
					没有数据哦~
				</view>
			</view>
		</view>

		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>

		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1px;"></view>
		</view>

		<u-skeleton :loading="skeletonLoad" :animation="true" bgColor="#FFF" el-color="#F3F3F3"></u-skeleton>

		<view @click="backTop" class="back backTop u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;"></image>
			<view class="text">顶部</view>
		</view>
    <fooBar nav="list"></fooBar>
	</view>
</template>

<script>
import b from '@/common/base.js';
	export default {
		data() {
			return {
				noData: false,
				skeletonLoad: true,
				title: '',
				modelType: '',
				modelId: 0,
        imageList:[],
				categoryList: [],
				pageIndex: 1,
				loadStatus: 'loadmore',
				// 滚动的位置
				rolldistance: '',
				adFlag: true,
				backShow: false,
			}
		},
		async onLoad({type,pid,id}) {
			var t = this
			t.modelType = type
			t.modelId = id
			if(type=='ranking'){
				t.title = '排行榜'
			}else if(type=='category'){
				t.title = '分类'
				t.getCategory()
			}
      t.getList();
			setTimeout(() => {
				t.skeletonLoad = false;
			}, 200)
		},
		methods: {

			async getList(){
        let t = this;
        uni.showLoading({
          mask: true,
          title: '正在拼命加载中...'
        })
        if(t.modelType === 'ranking'){
          t.x_request('api/wallpaper.image/rand', {}, function (t, res) {
            if (res.code === 1) {
              t.imageList = t.imageList.concat(res.data);
              uni.hideLoading();
            }
          });
        }else{
          let query = {page:t.pageIndex};
          if(t.modelId < 0){
            if(t.modelId === '-2'){
              query['is_selected'] = 1;
            }
          }else{
            query['category_id'] = t.modelId;
          }
          t.x_request('api/wallpaper.image', query, function (t, res) {
            if (res.code === 1) {
              let result = res.data
              if(result.last_page > t.pageIndex){
                t.pageIndex++;
              }else{
                t.loadStatus = 'nomore';
              }
              t.imageList = t.imageList.concat(result.data);
              uni.hideLoading()
            }
          });
        }


			},
			async getCategory(){
        b.getCategoryList(this);
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		},
		onPageScroll(e) {
			if(e.scrollTop > 1000){
				this.backShow = true
			}else{
				this.backShow = false
			}
		},
		async onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			await that.getList(that.modelType,that.modelId)
		},
	}
</script>

<style lang="scss">
   .top70{top:70px;}
	.menu{
		position: fixed;
		left: 0;
		width: calc(100% - 60rpx);
		z-index: 99;
		background-color: #FFFFFF;
	}
	.menus{
		position: fixed;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}
	.tags{
		font-size: 14px;
		background-color: #F5F6F8;
		color: #909399 ;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 50rpx;
		padding: 0 40rpx;
		white-space:nowrap;
	}
	.tag-active{
		background-image: linear-gradient(100deg, #fcfc44 , #f8c93c);
		color: #333333;
		box-shadow: 0px 0px 10px #fff8ab;
		animation: tiaobig 0.8s ease-in-out alternate infinite;
		animation-iteration-count:1;
	}
	@keyframes tiaobig {
		0% {
			transform: scale(0.98);
		}
		25% {
			transform: scale(1.08);
		}
		50% {
			transform: scale(0.94);
		}
		75% {
			transform: scale(1.06);
		}
		100% {
			transform: scale(1);
		}
	}

	.tab{
		position: relative;
		width: 215rpx;
		height: 350rpx;;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		image{
			border-radius: 16rpx;
			display: block;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		image{
			display: block;
		}
		.text{
			font-size: 14px;
		}
	}
	.backSearch{
		bottom: 200rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 100rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
</style>
